<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.vue封装的动画</title>
		<script type="text/javascript" src="./vue.js"></script>
		<style>
			h1{
				background-color: orange;
				width: 150px;
			}
			@keyframes hello {
				0% {
					transform: translateX(0px);
				}
				100%{
					transform: translateX(-100%);
				}
			}
			.peiqi-leave-active{
				animation: hello 1s linear;
			}
			.peiqi-enter-active{
				animation: hello 1s linear reverse;
			}
		</style>
	</head>
	<body>
		<div id="demo">
			<button @click="isShow = !isShow">点我切换：显示/隐藏</button>
			<transition name="peiqi">
				<h1 v-show="isShow">你好啊！</h1>
			</transition>
		</div>

		<script type="text/javascript" >
			new Vue({
				el:'#demo',
				data:{
					isShow:true
				}
			})
		</script>
	</body>
</html>